<%--
  Created by IntelliJ IDEA.
  User: InfiniteStar
  Date: 2019/11/18
  Time: 14:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ISMall-购物车</title>
    <link rel="icon" href="${pageContext.request.contextPath}/image/logoBigBl.ico" >
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/shopcart.css">
    <script src="${pageContext.request.contextPath}/css/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/sort.js"></script>
    <script src="${pageContext.request.contextPath}/js/holder.js"></script>
    <script src="${pageContext.request.contextPath}/js/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/sweetalert.css">
    <!-- 	<script>
            $(document).ready(function(){
                $(".list-group-item").hover(function(){
                    $(this).children("div.sort-detail").show();
                },function(){
                    $(this).children("div.sort-detail").hide();
                });
            })
        </script> -->
</head>
<body>
<div id="main">
    <jsp:include page="header.jsp"/>
</div>
<div class="shopping_cart">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="account_heading account_heading_ah">
                    <h1>购物车</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="all_wis_frm">
                <div class="col-md-12">
                    <div class="wishlist-content wishlist-content-2">
                        <form action="#">
                            <div class="wishlist-table wishlist-table-2 table-responsive">
                                <table id="cart-table">
                                    <thead>
                                    <tr>
                                        <th class="product-remove"><span class="nobr"></span></th>
                                        <th class="product-thumbnail product-thumbnail-2"></th>
                                        <th class="product-name product-name_2"><span class="nobr">商品</span></th>
                                        <th class="product-price"><span class="nobr">价格</span></th>
                                        <th class="product-stock-stauts"><span class="nobr">数量 </span></th>
                                        <th class="product-add-to-cart"><span class="nobr">总价</span></th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <%--<tfoot>
                                    <tr>
                                        <td colspan="6">
                                            <div class="coupon">
                                                <!-- <label for="coupon_code"></label>
                                                    <input id="coupon_code" class="input-text" type="text" placeholder="Coupon code" value="" name="coupon_code"> -->
                                                <a
                                                        class="button_act button_act_3 button_act_333 button_act_tp "
                                                        href="./shopcart.jsp">更新购物车</a>
                                                <!-- <a class="button_act btn-tip " href="#">Update cart</a> -->
                                            </div>
                                        </td>
                                    </tr>
                                    </tfoot>--%>
                                </table>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-md-6 col-xs-12">
                                <div class="cart_totals ">
                                    <h2>总价</h2>
                                    <table class="shop_table shop_table_responsive">
                                        <tbody>
                                        <tr class="cart-subtotal">
                                            <th>小计</th>
                                            <td data-title="Subtotal"><span
                                                    class="woocommerce-Price-amount amount"> <span
                                                    class="woocommerce-Price-currencySymbol" id="total-num"></span>
													</span></td>
                                        </tr>
                                        <tr class="order-total">
                                            <th>总额</th>
                                            <td data-title="Total"><strong> <span
                                                    class="woocommerce-Price-amount amount"> <span
                                                    class="woocommerce-Price-currencySymbol" id="total-price"></span>
														</span>
                                            </strong></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div class="wc-proceed-to-checkout">
                                        <a class="button_act button_act-tc confirm-orders" href="${pageContext.request.contextPath}/order">确认订单</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-xs-12"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="path" hidden>${pageContext.request.contextPath}</div>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        var path = $("#path").text();
        showcart();
    });

    function deleteCartGoods(goodsid) {
        $.ajax({
            url: "/shop/deleteCart/" + goodsid,
            type: "DELETE",
            success: function(result) {
                // swal(result.msg, "","success");
                showcart();
            },
            error: function() {
                swal("删除失败");
            }
        })
    }

    //改变商品数量更新购物车
    function updateCart(goodsid, newNum) {
        //获取当前数量
        // var newNum = $(".num").val();
        $.ajax({
            url: "/shop/update",
            data: {
                goodsid: goodsid,
                num: newNum
            },
            method: "post",
            success: function(result) {
                // swal(result.msg, "", "success");
                showcart();
            },
            error: function(result) {
                swal("更新购物车失败");
            }
        });
    }

    function showcart() {
        $.ajax({
            url: "/shop" + "/cartjson",
            type: "post",
            success: function(result) {
                //显示购物车
                build_cart_table(result);
            },
            error: function(result) {
                swal("获取购物车失败");
            }
        });
    }

    function build_cart_table(result) {
        $("#cart-table tbody").empty();
        var goods = result.info.shopcart;
        var totalnum = 0;
        var totalMoney = 0;

        if(goods.length === 0) {
            var spareTd = $('<tr> <td colspan="6"> <div class="coupon" style="margin-left:37%;">购物车还是空的，快去<a href="/shop/main" style="color:red;">首页</a>看看吧！ </div> </td> </tr>');
            spareTd.appendTo("#cart-table tbody");
        } else {
            $.each(goods, function(index, item) {

                var delA = $("<a></a>").addClass("delete-goods").attr("data-goodsid", item.goodsid).append("×");

                var deleteCart = $("<td></td>").addClass("product-remove product-remove_2")
                    .append(delA);

                delA.click(function() {
                    deleteCartGoods(item.goodsid);
                });

                var shopimage = $("<td></td>").addClass("product-thumbnail product-thumbnail-2")
                    .append($("<a></a>").attr("href", "/shop/detail?goodsid=" + item.goodsid)
                        .append($("<img/>").attr("src", "${pageContext.request.contextPath}/shopimage/" + item.imagePaths[0].path)));

                var goodsname = $("<td></td>").addClass("product-name product-name_2")
                    .append($("<a></a>").attr("href", "/shop/detail?goodsid=" + item.goodsid).append(item.goodsname));

                var goodsprice = $("<td></td>").addClass("product-price")
                    .append($("<span></span>").addClass("amount-list amount-list-2").append("￥" + item.price));

                var numIput = $("<input/>").addClass("num").attr("type", "number").attr("value", item.num);

                var num = $("<td></td>").addClass("product-stock-status")
                    .append($("<div></div>").addClass("latest_es_from_2")
                        .append(numIput));

                numIput.change(function() {
                    updateCart(item.goodsid, $(this).val());
                });

                var totalPrice = $("<td></td>").addClass("product-price")
                    .append($("<span></span>").addClass("amount-list amount-list-2").append("￥" + item.price * item.num));

                var goodsitem = $("<tr></tr>").append(deleteCart)
                    .append(shopimage)
                    .append(goodsname)
                    .append(goodsprice)
                    .append(num)
                    .append(totalPrice)
                    .appendTo("#cart-table tbody");
                totalnum++;
                totalMoney = totalMoney + item.price * item.num;
            });
        }

        //小计
        $("#total-num").text(totalnum);
        $("#total-price").text("￥" + totalMoney);
    }
</script>
</html>
